<template>
<div id="detail">
  <el-form ref="form" :model="form" :rules="rules" label-width="100px" size="mini">
    <el-card shadow="always" class="detail">
      <div slot="header" class="clearfix">
        <span>
          <i class="el-icon-house"></i>
          房间信息</span>
      </div>
      <el-form-item required label="所属楼宇" prop="buildingId">
        <el-select v-model="form.buildingId" placeholder="请选择所属楼宇"  style="width: 100%;" @change="onSelectBuilding" >
          <el-option v-for="item in buildingData" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item required label="所属楼层" prop="buildingDetailId">
        <el-select v-model="form.buildingDetailId" placeholder="请选择所属楼层"  style="width: 100%;" @change="onSelectRoom">
          <el-option v-for="item in buildingDetailData" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item required label="房间号" prop="roomId">
        <el-select v-model="form.roomId" placeholder="请选择房间号"  style="width: 100%;" @change="showRoom">
          <el-option v-for="item in roomData" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业名称">
        <el-input v-model="enterpriseName" :disabled="true"></el-input>
      </el-form-item>
    </el-card>  
    <el-card shadow="always" class="patrol">
      <div slot="header" class="clearfix">
        <span>
          <i class="el-icon-edit"></i>
          巡查情况</span>
      </div>
      <!-- <el-form-item required label="巡查计划" prop="planId">
        <el-select v-model="form.planId" placeholder="请选择巡查计划"  style="width: 100%;">
          <el-option v-for="item in palnListData" :key="item.value" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item required label="是否有人" prop="status">
        <el-radio v-model="form.status" :label="0">是</el-radio>
        <el-radio v-model="form.status" :label="1">否</el-radio>
      </el-form-item>
      <el-form-item label="附件">
        <el-upload
          :action="actionUrl"
          list-type="picture-card"
          :on-success="uploadFiles"
          :on-remove="removeFiles"
          >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-card> 
    <div class='footer'>   
      <el-button @click="backtoIndex">返回</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </el-form>
</div>
</template>

<script>
import {
  Host_Ip
} from "../../config.js"
import {GetBuilding, GetBuildingDetail, GetRoom, saveItem, planList  } from '../../api/requestForm.js'

export default {
  data () {
    return {
      actionUrl: Host_Ip + '/dfs/upload',
      palnListData: [],
      buildingData: [],
      buildingDetailData: [],
      roomData: [],
      loading: false,
      form: {
        buildingId: '',
        buildingDetailId: '',
        roomId: '',
        status: 0,
        files: []
      },
      rules: {
        // planId: [
        //   { required: true, message: '请选择所属计划', trigger: 'blur' },
        // ],
        buildingId: [
          { required: true, message: '请选择所属楼宇', trigger: 'blur' },
        ],
        buildingDetailId: [
          { required: true, message: '请选择所属楼层', trigger: 'blur' },
        ],
        roomId: [
          { required: true, message: '请选择房间号', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择是否有人', trigger: 'blur' },
        ],
      },
      enterpriseName: ''
    }
  },
  methods: {    
    backtoIndex() {
      // this.$router.push({ path: '/' })
      this.$router.back()
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        console.log(this.form, 'this.form')
        // return
          if (valid) {
            this.form.files = JSON.stringify(this.form.files)
            saveItem(this.form).then(res => {
              console.log(res)
              if(res.data.msg == 'success') {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                });
                this.backtoIndex()
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
              }
            })
          } else {
            console.log('errrrr')
          }
      })
    },
    uploadFiles(response, file, fileList) {
      console.log(response, file, fileList, 'upload')
      this.form.files = fileList
    },
    removeFiles(file, fileList) {
      console.log(file, fileList, 'remove')
      this.form.files = fileList
    },
    getPlanList() {
      planList({status: 0}).then(res => {
        if (res.data.code === 0) {
          const result = res.data.rows
          result.forEach(r => {
            this.palnListData.push({ value: r.id, text: r.planName })
          })
        }  
      })
    },
    // 选择楼宇列表
    onSelectPark () {
      this.buildingData = []
      this.form.buildingId = ''
      this.enterpriseName = ''
      GetBuilding().then(res => {
        if (res.data.code === 0) {
          const result = res.data.data
          result.forEach(r => {
            this.buildingData.push({ value: r.id, text: r.buildingName })
          })
        }        
        // console.log(this.buildingData, res, 'buildingData')
      })
    },
    // 选择楼层
    onSelectBuilding (buildingId) {
      // console.log(buildingId, 'buildingId')
      this.buildingDetailData = []
      this.form.buildingDetailId = ''
      this.form.roomId = ''
      this.enterpriseName = ''
      if (buildingId) {
        GetBuildingDetail( buildingId ).then(res => {
          if (res.data.code === 0) {
            const result = res.data.data
            result.forEach(r => {
              this.buildingDetailData.push({ value: r.id, text: r.floorName });
            })
          }
        })
      }
      // console.log(this.buildingDetailData)
    },
    // 选择房间
    onSelectRoom (buildingDetailId) {
      // console.log({ buildingId: this.form.buildingId, buildingDetailId, }, '?????')
      this.roomData = []
      this.form.roomId = ''
      this.enterpriseName = ''
      if (buildingDetailId) {
        GetRoom({ buildingId: this.form.buildingId, buildingDetailId }).then(res => {
          if (res.data.code === 0) {
            const result = res.data.data
            // console.log(result, 'result')
            result.forEach(r => {
              this.roomData.push({ value: r.id, text: r.name, enterpriseName: r.enterpriseName });
            })
          }
        })
      }
      // console.log(this.buildingDetailData)
    },
    showRoom(e) {
      // console.log(e, 'e')
      this.roomData.forEach(item => {
        if(item.value == e) {
          this.enterpriseName = item.enterpriseName
          // console.log(item, 'item')
        }
      })
    }
  },
  created() {
    this.form.planId = this.$route.query.planId
    this.onSelectPark()
    // this.getPlanList()
  },
}
</script>

<style >
html,body{
  padding: 0 !important;
  margin: 0 !important;
}
</style>
<style scoped lang="less">
#detail {
  padding: 10px;
  .patrol {
    margin-top: 10px;
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
